theme: make modal dialog buttons match the mockups

The buttons should have a glassy transparent look. Also, they should not
be as tall, should light up on hover, and their labels should be white
in order to stand out. Making the labels solid white requires removing the
transparency set in modalDialog.js. Also, add a separate color setting
for the dialog as a whole - this avoids having a white icon.

https://bugzilla.gnome.org/show_bug.cgi?id=655428

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 8ed13c55ddc7329a2d2ba4b619d2ad3923773590..9a6218d88bdee64df033a4047de4461cc2b0b772 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1505,7 +1505,7 @@ StTooltip StLabel {
     border-radius: 24px;
     background-color: rgba(0.0, 0.0, 0.0, 0.9);
     border: 2px solid #868686;
-    color: #ffffff;
+    color: #babdb6;
 
     padding-right: 42px;
     padding-left: 42px;
@@ -1521,25 +1521,31 @@ StTooltip StLabel {
     border: 1px solid #8b8b8b;
     border-radius: 18px;
     font-size: 10.5pt;
+    color: white;
 
     margin-left: 10px;
     margin-right: 10px;
 
     padding-left: 32px;
     padding-right: 32px;
-    padding-top: 8px;
-    padding-bottom: 8px;
+    padding-top: 6px;
+    padding-bottom: 6px;
 
     background-gradient-direction: vertical;
-    background-gradient-start: #29323b;
-    background-gradient-end: #121a24;
+    background-gradient-start: rgba(255, 255, 255, 0.2);
+    background-gradient-end: rgba(255, 255, 255, 0);
+}
+
+.modal-dialog-button:hover {
+    background-gradient-start: rgba(255, 255, 255, 0.3);
+    background-gradient-end: rgba(255, 255, 255, 0.1);
 }
 
 .modal-dialog-button:active,
 .modal-dialog-button:pressed {
     border-color: #a5a5a5;
-    background-gradient-start: #121a24;
-    background-gradient-end: #29323b;
+    background-gradient-start: rgba(255, 255, 255, 0);
+    background-gradient-end: rgba(255, 255, 255, 0.2);
 }
 
 .modal-dialog-button:focus {

diff --git a/js/ui/modalDialog.js b/js/ui/modalDialog.js
index ce943b9a269bb851af5e102629b40a70fab0e2f9..ab637e622453f5e53a769acca906765b16b97215 100644 (file)
--- a/js/ui/modalDialog.js
+++ b/js/ui/modalDialog.js
@@ -82,7 +82,6 @@ ModalDialog.prototype = {
                                  y_align: St.Align.START });
 
         this._buttonLayout = new St.BoxLayout({ style_class: 'modal-dialog-button-box',
-                                                opacity:     220,
                                                 vertical:    false });
         this._dialogLayout.add(this._buttonLayout,
                                { expand:  true,